<template>
	<view class="address">
		<view class="box">
			<view class="list" v-for="(item,index) in list" :key="index" @tap.stop="select(item)">
				<view class="list_t flex-r-s-c">
					<image src="/static/my/dz.png" mode=""></image>
					<view class="text" style="width: 74%;margin-right: 10rpx;">{{item.receipt_address}}&emsp;{{item.address}}</view>
					<view class="default"  v-if="item.is_default == 1" style="font-size: 24rpx;font-weight: 400;color: #B6B6B6;width: 20%;">默认地址</view>
				</view>
				<view class="list_b flex-r-b-c">
					<view class="text">{{item.name}} | {{item.mobile}}</view>
					<image src="/static/my/dzxg.png" mode="" @tap.stop="edit(item)"></image>
				</view>
			</view>
			
		</view>
		<view class="" style="height: 100rpx;">
			
		</view>
		<view class="" style="width: 100vw;height: 160rpx;background: #F9F9F9;position: fixed;bottom: 0rpx;">
			<view class="btn" @tap.stop="addAddress">添加</view>
		</view>
		
		
		<!-- 添加地址弹框 -->
		<u-popup v-model="addShow" mode="bottom" height="85%" border-radius="40">
			<view class="form">
				<view class="list flex-r-b-c">
					<view class="text">收货人</view>
					<input type="text" placeholder="请输入姓名" v-model="form.name">
				</view>
				<view class="list flex-r-b-c">
					<view class="text">性别</view>
					<u-radio-group v-model="form.gender" active-color="#000" @change="radioGroupChange">
						<u-radio name="3" >保密</u-radio>
						<u-radio name="1" >男</u-radio>
						<u-radio name="2" >女</u-radio>
					</u-radio-group>
				</view>
				<view class="list flex-r-b-c">
					<view class="text">手机号</view>
					<input type="tel" placeholder="请输入手机号" v-model="form.mobile">
				</view>
				<view class="list flex-r-b-c" @tap.stop="WXAddress">
					<view class="text">收货地址</view>
					<input type="text" style="width: 70%;" placeholder="请选择收货地址" disabled v-model="form.receipt_address">
				</view>
				<view class="list flex-r-b-c">
					<view class="text">详细地址</view>
					<input type="text" style="width: 70%;" placeholder="请输入详细地址" v-model="form.address">
				</view>
				<view class="default flex-r-s-c">
					<view class="text" style="margin-right: 20rpx;">视为默认地址</view>
					<u-switch v-model="isSwitch" size="30" active-color="#000" inactive-color="#eee" ></u-switch>
				</view>
				
				<!-- <view class="popupBtn">保存</view> -->
				<view class="popupBtn" @tap.stop="determineBtn">确定</view>
				<view class="deleteBtn" @tap.stop="deleteBtn">{{form.id == '' ? '取消' : '删除' }}</view>
			</view>
		</u-popup>
		
		<!-- 修改地址弹框 -->
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addShow: false,
				isSwitch: false,
				form: {
					name: '',
					gender: '',
					mobile: '',
					receipt_address: '',
					address: '',
					is_default: '',
					id: '',
					lng: '',
					lat: '',
				},
				list: [],
			};
		},
		onLoad(el) {
			this.getAddressList()
		},
		methods: {
			addAddress(){
				this.initialization()
				this.addShow = true
			},
			// 初始化
			initialization(){
				this.isSwitch = false
				this.form = {
					name: '',
					gender: '',
					mobile: '',
					receipt_address: '',
					address: '',
					is_default: '',
					id: '',
					lng: '',
					lat: '',
					// province: '',
					// city: '',
				}
			},
			// 获取地址列表
			getAddressList(){
				let that = this
				that.$api.addressList().then(res => {
					this.list = res.data.data
					if(this.list.length==0) uni.removeStorageSync('myAddress')
				})
			},
			// 地址编辑
			edit(el){
				// console.log(el)
				let that = this
				that.$api.addressDetail({
					id:el.id
				}).then(res => {
					that.$utils.pageckForIn(that.form,res.data.data)
					that.form.is_default == 2 ? that.isSwitch = false : that.isSwitch = true
					that.addShow = true
				})
			},
			// 地址添加
			determineBtn() {
				let that = this
				if (that.form.name == '') return that.$utils.toast('请输入收货人名称')
				if (that.form.gender == '') return that.$utils.toast('请选择性别')
				if(!that.$utils.testifyMobile(that.form.mobile)) return that.$utils.toast('请输入正确的手机号')
				if (that.form.receipt_address == '') return that.$utils.toast('请选择收货地址')
				that.isSwitch == true ? that.form.is_default = '1' : that.form.is_default = '2'
				that.$api.addressAddUpd(that.form).then(res => {
					that.form.id == '' ? that.$utils.toast('添加成功') : that.$utils.toast('修改成功')
					setTimeout(() => {
						that.addShow = false
						that.getAddressList()
						that.initialization()
					}, 1000)
				})
			},
			// 微信定位
			WXAddress() {
				let that = this
				uni.chooseLocation({
					success(res) {
						that.form.receipt_address = res.address
						that.form.lng = res.longitude
						that.form.lat = res.latitude
					},
					fail(err) {
						console.log(err,'err')
					}
				})
			},
			// 性格选择
			radioGroupChange(e) {
				console.log(e)
			},
			
			// 选中的地址
			select(el){
				let page = getCurrentPages()
				let pages = page[page.length - 2]
				if(pages.route == 'pages/shop/confirmOrder/confirmOrder'){
					pages.$vm.shaddressid = el.id
					pages.$vm.addressList = [el]
					pages.$vm.getConfirmOrder()
					uni.navigateBack()
				}
			},
			
			// 删除
			deleteBtn(){
				let that = this
				if(that.form.id == ''){
					that.initialization()
					that.addShow = false
				} else {
					that.$api.addressDel({
						id: that.form.id
					}).then(res => {
						console.log(res,'del')
						that.$utils.toast('删除成功')
						setTimeout(() => {
							that.addShow = false
							that.initialization()
							that.getAddressList()
						}, 1000)
					})
				}
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F9F9F9;
		
	}
	.address{
		width: 100vw;
		.box{
			margin-bottom: 200rpx;
			
		}
		.list{
			width: 90%;
			margin: 30rpx auto;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			.list_t{
				width: 100%;
				font-size: 28rpx;
				font-weight: 400;
				color: #000;
				image{
					width: 24rpx;
					height: 30rpx;
					margin-right: 20rpx;
				}
			}
			.list_b{
				font-size: 24rpx;
				font-weight: 400;
				color: #7F8084;
				margin-top: 30rpx;
				image{
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		
		.btn{
			width: 90%;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			border-radius: 96rpx;
			background-color: #000;
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
			position: fixed;
			left: 5%;
			bottom: 40rpx;
		}
		
		
		.form{
			width: 90%;
			margin: 0 auto;
			margin-top: 40rpx;
			.list{
				width: 100%;
				height: 90rpx;
				border-bottom: 1px solid #EFEFEF;
				.text{
					font-size: 28rpx;
					font-weight: 400;
					color: #000;
				}
				input{
					text-align: right;
				}
			}
			.default{
				margin-top: 40rpx;
				margin-left: 30rpx;
				font-size: 28rpx;
				color: #7F8084;
				font-weight: 400;
			}
			
			.popupBtn{
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				border-radius: 96rpx;
				background-color: #000;
				color: #fff;
				font-size: 28rpx;
				font-weight: 500;
				text-align: center;
				margin-top: 70rpx;
			}
			
			.deleteBtn{
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				border-radius: 96rpx;
				background-color: #DCDCDC;
				color: #7F8084;
				font-size: 28rpx;
				font-weight: 500;
				text-align: center;
				margin-top: 40rpx;
			}
			
		}
		
		
	}
</style>
